
<template>
    <div>
        <!-- 基本信息弹窗 -->
        <Modal
            v-model="endowmentInfoModal"
            width="1500px"
            styles='text-align:center'
            :closable="false"
            :mask-closable="false"
            footer-hide>
            <div class="container">
                <h2 class="tit">变更复审信息申请填报</h2>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                    <div class="right-part">
                        <div class="title">资质证明材料上传
							<span v-if="notReview" style="color: #FF9966;fontSize: 14px;marginLeft:35px;margin-bottom: 10px">(注意:图片只能上传jpg格式，且文件大小不超过200KB)</span>
						</div>
                        <Row>
							<Col span="8">
								<!-- 医院照片 -->                 
								<div class="address">
									<div class="left">
									<span>医院照片：</span>
									</div>
									<FormItem style="display:flex;">
									<div class="upload-part" style="height:100px;width:100px;">
										<div>
										<div class="demo-upload-list" v-for="(item,index) in uploadList1" :key="index"
										>
											<div v-if="item.status === 'finished'" style="height:100px;width:100px;">
											<img :src="fileBaseUrl + item.res.fileName">
											<div class="demo-upload-list-cover">
												<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
												<Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('1', item)"></Icon>
											</div>
											</div>
											<div v-else style="height:100px;width:100px;">
											<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
											</div>
										</div>
										</div>
										<Upload
										v-show="uploadList1.length ==0"
										ref="upload1"
										:headers="fromData"
										:action="uploadUrl"
										:default-file-list="defaultList1"
										:format="['jpg']"
										:on-format-error="uploadFormatError"
										max-size="200"
										:on-exceeded-size="handleMaxSize"
										:before-upload="() => preview('1')"
										multiple
										type="drag"
										:data="uploadData"
										:on-success="(res, file) => handleSuccess(res, file, '1')"
										:show-upload-list="noshow">
										<div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
											<i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
										</div>
										</Upload>
									</div>
									</FormItem>
								</div>
								<!-- 法人身份证正面 -->
								<div class="address">
									<div class="left">
									    <span style="color:red;">*</span>
									    <span>法人身份证正面：</span>
									</div>
									<FormItem prop="upload4" style="display:flex;">
										<div class="upload-part" style="height:100px;width:100px;">
										<div >
											<div class="demo-upload-list" v-for="(item,index) in uploadList4" :key="index" style="height:100px">
											<div v-if="item.status === 'finished'" style="height:100px;width:100px;">
												<img :src="fileBaseUrl + item.res.fileName">
												<div class="demo-upload-list-cover">
												<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
												<Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('4', item)"></Icon>
												</div>
											</div>
											<div v-else style="height:100px;width:100px;">
												<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
											</div>
											</div>
										</div>
										<Upload
											v-show="uploadList4.length ==0"
											ref="upload4"
											:headers="fromData"
											:action="uploadUrl"
											:default-file-list="defaultList4"
											:format="['jpg']"
											:on-format-error="uploadFormatError"
											max-size="200"
											:on-exceeded-size="handleMaxSize"
											:before-upload="() => preview('4')"
											:data="uploadData"
											:on-success="(res, file) => handleSuccess(res, file, '4')"
											:show-upload-list="noshow"
											multiple
											type="drag"
											
										>
											<!-- style="display: inline-block;width:98px;height:98px;" -->
											<!-- <Button v-if="notReview" type="primary" class="button-upload">选择文件上传</Button> -->
											<div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
												<i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
											</div>
										</Upload>
										</div>
									</FormItem>
								</div>
								</Col>
								<Col span="8">
								<!-- 营业执照 -->
								<div class="address">
									<div class="left">
									<span style="color:red;">*</span>
									<span>营业执照：</span>
									</div>
									<FormItem prop="upload2" style="display:flex;">
									<div class="upload-part" style="height:100px;width:100px;">
										<div >
										<div class="demo-upload-list" v-for="(item,index) in uploadList2" :key="index" style="height:100px;">
											<div v-if="item.status === 'finished'" style="height:100px;width:100px;">
											<img :src="fileBaseUrl + item.res.fileName">
											<div class="demo-upload-list-cover">
												<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
												<Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('2', item)"></Icon>
											</div>
											</div>
											<div v-else style="height:100px;width:100px;">
											<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
											</div>
										</div>
										</div>                         
										<Upload
											v-show="uploadList2.length ==0"
											ref="upload2"
											:headers="fromData"
											:action="uploadUrl"
											:default-file-list="defaultList2"
											:format="['jpg']"
											:on-format-error="uploadFormatError"
											max-size="200"
											:on-exceeded-size="handleMaxSize"
											:before-upload="() => preview('2')"
											:data="uploadData"
											:on-success="(res, file) => handleSuccess(res, file, '2')"
											:show-upload-list="noshow"
											multiple
											type="drag"
											
										>
											<div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
												<i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
											</div>
										</Upload>
									</div>
									</FormItem>
								</div>
								<!-- 法人身份证反面 -->
								<div class="address">
									<div class="left">
									<span style="color:red;">*</span>
									<span>法人身份证反面：</span>
									</div>
									<FormItem prop="upload5" style="display:flex;">
									<div class="upload-part" style="height:100px;width:100px;">
										<div >
										<div class="demo-upload-list" v-for="(item,index) in uploadList5" :key="index">
											<div v-if="item.status === 'finished'" style="height:100px;width:100px;">
											<img :src="fileBaseUrl + item.res.fileName">
											<div class="demo-upload-list-cover">
												<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
												<Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('5', item)"></Icon>
											</div>
											</div>
											<div v-else style="height:100px;width:100px;">
											<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
											</div>
										</div>
										</div>                        
										<Upload
											v-show="uploadList5.length ==0"
											ref="upload5"
											:headers="fromData"
											:action="uploadUrl"
											:default-file-list="defaultList5"
											:format="['jpg']"
											:on-format-error="uploadFormatError"
											max-size="200"
											:on-exceeded-size="handleMaxSize"
											:before-upload="() => preview('5')"
											:data="uploadData"
											:on-success="(res, file) => handleSuccess(res, file, '5')"
											:show-upload-list="noshow"
											multiple
											type="drag"
											
										>
											<div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
												<i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
											</div>
										</Upload>
									</div>
									</FormItem>
								</div>
								</Col>
								<Col span="8">
								<!-- 执业许可证--> 
								<div class="address">
									<div class="left">
									<span style="color:red;">*</span>
									<span>执业许可证：</span>
									</div>
									<FormItem prop="upload3" style="display:flex;">
									<div class="upload-part" style="height:100px;width:100px;">
										<div >
										<div class="demo-upload-list" v-for="(item,index) in uploadList3" :key="index">
											<div v-if="item.status === 'finished'" style="height:100px;width:100px;">
											<img :src="fileBaseUrl + item.res.fileName">
											<div class="demo-upload-list-cover">
												<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
												<Icon v-if="notReview" type="ios-trash-outline" @click.native="onremove('3', item)"></Icon>
											</div>
											</div>
											<div v-else style="height:100px;width:100px;">
											<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
											</div>
										</div>
										</div>                       
										<Upload
											v-show="uploadList3.length ==0"
											ref="upload3"
											:headers="fromData"
											:action="uploadUrl"
											:default-file-list="defaultList3"
											:format="['jpg']"
											:on-format-error="uploadFormatError"
											max-size="200"
											:on-exceeded-size="handleMaxSize"
											:before-upload="() => preview('3')"
											:data="uploadData"
											:on-success="(res, file) => handleSuccess(res, file, '3')"
											:show-upload-list="noshow"
											multiple
											type="drag"
											
										>
											<div v-if="notReview" style="width: 98px;height:98px;line-height: 98px;background: #fff;">
												<i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
											</div>
										</Upload>
									</div>
									</FormItem>
								</div> 
                            </Col>
							<Col span="24">
                                <!-- 变更原因说明 -->
                                <div class="address hongdian" >                     
                                    <div class="left">  
                                        <span style="color:red;">*</span>                      
                                        <span>变更原因说明：</span>
                                    </div>
                                    <FormItem class="right" prop="reasonChange">
                                        <Input
                                        v-if="notReview"
                                        v-model.trim="formValidate.reasonChange"
                                        placeholder="请输入变更原因"
                                        clearable  
                                        style="width:100%"                       
                                        ></Input>
                                        <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.reasonChange}}</div>
                                    </FormItem> 
                                </div>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </div>
            <div class="btn">
                <Button type="info" v-if="notReview" @click="handleSubmit('formValidate',1)" :disabled="disabled">
                    <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />
                    保存并提交
                </Button>
                <Button type="primary" @click="handleSubmit('formValidate',0)" style="margin-left:30px" v-if="notReview" >
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>暂存数据
                </Button>
                <Button @click="endowmentInfoModal = false" style="margin-left:30px">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭返回
                </Button>
            </div>
        </Modal>
		<Modal title="预览图片" width="30" v-model="viewModal" footer-hide>
			<div>
				<img :src="viewSrc" style="width: 100%" />
			</div>
		</Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
export default {
    props: {
		endowmentInfoModal: String,
		reasonChange: String,
        id: Number,
	},
    data() {
        return {
            uploadData: {
				json: '{"urlCode":"' + code.urlCode.userImage + '"}'
			},
            // 查看列表
			uploadList1: [],
			uploadList2: [],
			uploadList3: [],
			uploadList4: [],
			uploadList5: [],
			uploadList6: [],
			uploadList7: [],
			
			defaultList1: [],
			defaultList2: [],
			defaultList3: [],
			defaultList4: [],
			defaultList5: [],
			defaultList6: [],
			defaultList7: [],
			// 预览图片的src
			viewSrc: '',
			// 预览图片Modal
			viewModal: false,
			uploadUrl: api.fileAll,
            formValidate: {
				id: null,
				reasonChange: "",
                //资质证明材料
				hospitalCertList: [
					{
						type: "1",
						code: "",
						filePath: {}
					},
					{
						type: "2",
						code: "",
						filePath: {}
					},
					{
						type: "3",
						code: "",
						filePath: {}
					},
					{
						type: "4",
						code: "",
						filePath: {}
					},
					{
						type: "5",
						code: "",
						filePath: {}
					}
				],
			},
            ruleValidate: {
				// 单位法人姓名
				reasonChange: [ { required: true, message: "请输入变更原因", trigger: "change" } ],
                upload2: [ { required: false, message: "请上传营业执照", trigger: "change" } ],
				upload3: [ { required: false, message: "请上传执业许可证", trigger: "change" } ],
				upload4: [ { required: false, message: "请上传法人身份证正面", trigger: "change" } ],
				upload5: [ { required: false, message: "请上传法人身份证反面", trigger: "change" } ],
			},
            notReview: true,
            hospitalId: '',
			backId: ''
        }
    },
    mounted() {
        this.hospitalId = this.$route.query.hospitalId;
		this.formValidate.id = this.hospitalId;
		this.formValidate.reasonChange = this.reasonChange;
		this.uploadList1 = this.$refs.upload1.fileList;
		this.uploadList2 = this.$refs.upload2.fileList;
		this.uploadList3 = this.$refs.upload3.fileList;
		this.uploadList4 = this.$refs.upload4.fileList;
		this.uploadList5 = this.$refs.upload5.fileList;
        //复审获取详情
        if(this.id) {
            this.$axios.post(api.findSuperviseHospitalCertByReviewApplyId, {id: this.id}).then(res => {
				if (res.data.success) {
					// 利用返回数据填充 前端数据
                    const ret = JSON.parse(JSON.stringify(res.data.object));
                    //对 ret.certlist 进行 this.formValidate.certListmerge 进行merge 以兼容旧数据;
                    if(ret){
                        this.formValidate.hospitalCertList = ret;
                        this.backId = this.formValidate.hospitalCertList[0].id;
                        this.formValidate.hospitalCertList.forEach((item, index) => {
                            if (item.filePath) {
                                item.filePath = JSON.parse(item.filePath);
                                if (!Array.isArray(item.filePath)) {
                                    item.filePath = [item.filePath];
                                }
                                item.filePath.forEach((item2, index) => {
                                    this.$refs['upload' + item.type].fileList.push({
                                        status: "finished",
                                        url: item2.fileName,
                                        res: item2,
                                        uid: index
                                    });
                                });
                            }
                        });
                    }
				}
			});
        } else {
            //获取机构协议列表
            this.gethospitalCertList()
        }       
    },
    created() {

    },
    methods: {
        //根据机构code获取机构设立情况
        gethospitalCertList() {	
			this.$axios.post(api.findHospitalCertByOrgCode, {}).then(res => {
				// 利用返回数据填充 前端数据
		        const ret = JSON.parse(JSON.stringify(res.data.object));
				this.formValidate.hospitalCertList = ret;
				this.formValidate.id = ret[0].hospitalid;
		        //对 ret.certlist 进行 this.formValidate.certListmerge 进行merge 以兼容旧数据;
				if(ret){
					this.formValidate.hospitalCertList.forEach((item, index) => {
						ret.forEach((c,j)=>{
							if(item.type == c.type){
								ret[j] = Object.assign({},  item,ret[j] || {})
							}
						})
					})
					ret.forEach((item, index) => {
						console.log(item.filePath)
						if (item.filePath) {
							item.filePath = JSON.parse(item.filePath);
							if (!Array.isArray(item.filePath)) {
								item.filePath = [item.filePath];
							}
							item.filePath.forEach((item2, index) => {
								this.$refs['upload' + item.type].fileList.push({
									status: "finished",
									url: item2.fileName,
									res: item2,
									uid: index
								});
							});
						}
					});
				}
			}).catch(err => {
				console.log(err);
			});
		},       
		//更改审核状态
        updateType(val) {
            this.$axios.post(api.updateReviewStatusById, {id: this.id,reviewStatus:val}).then(resp => {
                    this.$Message.success("操作成功");
                    this.disabled = false 
					this.endowmentInfoModal = false
                    this.$emit('getSuperviseData');
                }).catch(err => {
                    console.log(err);
                });
        },
        // 提交表单
		handleSubmit(name,val) {	    
			this.disabled = true
			this.$refs[name].validate(valid => {
				if (valid) {
					//上传'图片'字段内容填充
					if(this.formValidate.hospitalCertList){
						this.formValidate.hospitalCertList.forEach((item, index) => {
							item.filePath = this['uploadList' + item.type].map((item) => item.res)
						});
					}
                    this.formValidate.reviewStatus = val
                    let url;
                    if(this.id){
						this.formValidate.id = this.backId
                        url = api.updateSuperviseReviewHospitalCert
						this.formValidate = this.formValidate.hospitalCertList
						this.formValidate.forEach(item=>{
							item.filePath = JSON.stringify(item.filePath)
						})
                    } else {
                        url = api.insertSuperviseReviewHospitalCert
                    }
					this.$axios.post(url, this.formValidate).then(res => {
						if (res.data.code) {
							let ret = res.data;
                            this.updateType(val)
						} else {
							this.disabled = false 
							this.$Message.error(res.data.message);
						}
					})
					.catch(err => {
						this.disabled = false
						this.$Message.error(res.data.err);
					});
				} else {
					this.disabled = false 
					// 必填项填写失败
					this.$Message.error("请检查必填项是否填写正确！");
				}
			});
		},
        //       控制图片上传开始---------------------------------------------------------------------
		onremove (type, file) {
			const fileList = this.$refs['upload' + type].fileList;
			this.$refs['upload' + type].fileList.splice(fileList.indexOf(file), 1);       
		},
		// 文件上传成功触发的函数
		handleSuccess(res, file, type) {
			res = this.uploadFileDecrypt(res);
			if (res.success) {
				file.res = res.object[0];
			} else {
				this.$Message.error("上传失败,请重试");
			}
		},
		// // 查看预览图片
		handleView(item) {
			this.viewModal = true;
			this.viewSrc = this.fileBaseUrl + item.res.fileName;
		},
		preview(type) {
			if (type !== '7') {
				const check = this['uploadList' + type].length < 1;
				if (!check) {
					this.$Message.info("只能上传一张图片");
					return false;
				}
			}
		},
		// 控制图片上传结束-------------------------------------------------------------------------
		// 上传图片大小错误提醒
		handleMaxSize() {
			this.$Message.error("上传图片大小不能超过200kb");
		},
		// 上传图片格式错误提醒
		uploadFormatError() {
			this.$Message.error("上传图片类型只能是jpg格式");
		},
    },
}
</script>
<style lang="less" scoped>
.tit {
    text-align: center;
    font-weight: 550;
}
.btn {
    width:100%;
    text-align:center;
    margin-bottom: 20px;
}
.container {
    width: 100%;
    margin-bottom: 40px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    
      .left-part {
        width: 98%;
        margin: 20px auto;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;         
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -10px;
        //   margin-left: 35px;
          margin: 10px 0 0 30px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          min-width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        // flex-direction: row;    
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
	  .tubiao {
        font-size:16px;
        margin-right:5px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 500px;
      }
		.protocol {
			display: flex;
			margin: 0 40px;
			padding-bottom: 15px;
			.sort {
				width: 40%;
				margin-right: 30px;
				font-size: 14px;
				font-weight: 550;
			}
			.dsort {
				width: 16%;
				margin-right: 20px;
				font-size: 14px;
				font-weight: 550;
			}
			.asd {
				display: flex;
				.inputbox {
					width:83%;
					margin-left: 10px;
				}
			}
		}
	 	.b {
			font-size: 14px;
			color: #ff9966;
			margin-left: 20px;
		} 
    }
    .fuwu {
        width: calc(100%);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgb(242, 242, 242);
        .xsfw {
            margin: 0;
            .select_wufu {
                margin: 0 30px;
                display: flex;
                flex-direction: row;
                padding-left: 20px;
                align-items: center;
                flex-wrap: wrap;
                div {
                    width: 13%;
                    margin: 10px 20px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
					font-size: 14px !important;
					font-weight: 550;
                    input {
                        outline: none;
                        border: none;
                    }
                }
            }
        }
    }
	.tablebox{
		margin: 0 30px 20px 30px;
	}
	.page{
        text-align: center;
        margin-top: 20px;
    }
  
.ivu-checkbox-wrapper{
	font-size: 14px !important;
}
.button-upload {
  margin-left: 10px;
  margin-right: 10px;
}
.ivu-upload {
  display: flex;
  .ivu-upload-select {
    height: 100%;
  }
  /deep/ .ivu-upload-list {
    height: 100%;
    margin-top: -10px;
    padding-left: 4px;
    padding-right: 4px;
    .ivu-upload-list-file {
      padding: 0px;
    }
  }
}
</style>
